<#--form 基本信息-->
<form id="${viewCode!}_form"
    <#--  遍历所有属性    -->
    <#if props??>
        <#list props?keys as key>
            ${key}="${props[key]}"
        </#list>
    </#if>
>

    <#-- 填充form的所有字段   -->
    <#if fields??>
        <#list fields as entry>
            <#-- 如果规定了form每行展示多列，则需要额外的div用户换行 -->
            <#if columnNum?? && columnNum gt 0>
                <#if entry?index % columnNum == 0>
                    <div style="margin-bottom:20px">
                </#if>
            <#else>
                <div style="margin-bottom:20px">
            </#if>

            <#if (entry.label)??> <label for="${entry.field}"> ${entry.label} </label> </#if>
            <#-- 如果表单字段是 text integer  double 等 -->
            <#if entry.type?lower_case == 'text' || entry.type?lower_case == 'integer' || entry.type?lower_case == 'double'>
                <input id="${viewCode}_${entry.field}"
                       formId="${viewCode!}_form"
                       class="easyui-textbox"
                       <#if (entry.validate)??>
                           <#list entry.validate?keys as key>
                                validate-${key}="${entry.validate[key]?string}"
                           </#list>
                       </#if>
                       name="${entry.field}"
                       <#if (entry.placeholder)??>
                           placeholder="${entry.placeholder}" prompt="${entry.placeholder}"
                       </#if>
                       <#if readonly?? && readonly> readonly="readonly" </#if>
                       <#if (entry.default)??> value="${entry.default}" </#if>
                       <#if (entry.props)??>
                           <#list entry.props?keys as key>
                               ${key}="${entry.props[key]?string}"
                           </#list>
                       </#if>
                />
            <#-- 密码框 -->
            <#elseif entry.type?lower_case == 'password'>
                <input id="${viewCode}_${entry.field}"
                       formId="${viewCode!}_form"
                       <#if (entry.validate)??>
                           <#list entry.validate?keys as key>
                                validate-${key}="${entry.validate[key]?string}"
                           </#list>
                       </#if>
                       class="easyui-passwordbox"
                       name="${entry.field}"
                       <#if (entry.placeholder)??>
                           placeholder="${entry.placeholder}" prompt="${entry.placeholder}"
                       </#if>
                       <#--<#if (entry.label)??> label="${entry.label}" </#if>-->
                       <#if readonly?? && readonly> readonly="readonly" </#if>
                       <#if (entry.default)??> value="${entry.default}" </#if>
                       <#if (entry.props)??>
                           <#list entry.props?keys as key>
                               ${key}="${entry.props[key]?string}"
                           </#list>
                       </#if>
                />
            <#-- 复选框 -->
            <#elseif entry.type?lower_case == 'checkbox'>
                <#if (entry.options)??>
                    <#list entry.options as option>
                    <div class="checkbox-line" style="margin-top: 5px;">
                        <input entry-type="checkbox"
                                formId="${viewCode!}_form"
                                <#if (entry.validate)??>
                                   <#list entry.validate?keys as key>
                                        validate-${key}="${entry.validate[key]?string}"
                                   </#list>
                                </#if>
                                class="easyui-checkbox"
                                name="${entry.field}"
                                <#if readonly?? && readonly> readonly="readonly" </#if>
                                label="${option.label}"
                                value="${option.key}"
                                <#if (option.default)?? && option.default> checked </#if>
                                <#if (entry.props)??>
                                   <#list entry.props?keys as key>
                                       ${key}="${entry.props[key]?string}"
                                   </#list>
                               </#if>
                        />
                        </div>
                    </#list>
                </#if>
            <#elseif entry.type?lower_case == 'select' || entry.type?lower_case == 'radio'>
                <#-- 有options  渲染成普通的select -->
                <#if (entry.options)??>
                    <select id="${viewCode}_${entry.field}"
                            class="easyui-combobox"
                            formId="${viewCode!}_form"
                            name="${entry.field}"
                            <#if (entry.validate)??>
                               <#list entry.validate?keys as key>
                                    validate-${key}="${entry.validate[key]?string}"
                               </#list>
                            </#if>
                            <#if readonly?? && readonly> readonly="readonly" </#if>
                            <#if (entry.placeholder)??>
                               placeholder="${entry.placeholder}" prompt="${entry.placeholder}"
                            </#if>
                            <#if (entry.props)??>
                               <#list entry.props?keys as key>
                                   ${key}="${entry.props[key]?string}"
                               </#list>
                           </#if>
                    >
                        <#list entry.options as opt>
                            <option value="${opt.key}" <#if (opt.default)?? && opt.default> selected </#if>>${opt.label!}</option>
                        </#list>
                    </select>
                <#else>
                    <#-- 没有 options， 渲染成为input元素 -->
                    <input id="${viewCode}_${entry.field}"
                       formId="${viewCode!}_form"
                       entry-type="select"
                       <#if (entry.validate)??>
                           <#list entry.validate?keys as key>
                                validate-${key}="${entry.validate[key]?string}"
                           </#list>
                       </#if>
                       class="easyui-combobox"
                       name="${entry.field}"
                       <#if (entry.placeholder)??>
                           placeholder="${entry.placeholder}" prompt="${entry.placeholder}"
                       </#if>
                       <#--<#if (entry.label)??> label="${entry.label}" </#if>-->
                       <#if readonly?? && readonly> readonly="readonly" </#if>
                       <#if (entry.default)??> value="${entry.default}" </#if>
                       <#if (entry.props)??>
                           <#list entry.props?keys as key>
                               ${key}="${entry.props[key]?string}"
                           </#list>
                       </#if>
                    />
                </#if>
            <#elseif entry.type?lower_case == 'date'>
                <input
                    id="${viewCode}_${entry.field}"
                    formId="${viewCode!}_form"
                    <#if (entry.validate)??>
                       <#list entry.validate?keys as key>
                            validate-${key}="${entry.validate[key]?string}"
                       </#list>
                    </#if>
                    class="easyui-datebox"
                    name="${entry.field}"
                    <#if readonly?? && readonly> readonly="readonly" </#if>
                    <#if (entry.default)??> value="${entry.default}" </#if>
                    <#if (entry.placeholder)??>
                       placeholder="${entry.placeholder}" prompt="${entry.placeholder}"
                    </#if>
                    <#if (entry.props)??>
                       <#list entry.props?keys as key>
                           ${key}="${entry.props[key]?string}"
                       </#list>
                    </#if>
                />
            <#elseif entry.type?lower_case == 'datetime'>
                <input
                    id="${viewCode}_${entry.field}"
                    formId="${viewCode!}_form"
                    <#if (entry.validate)??>
                       <#list entry.validate?keys as key>
                            validate-${key}="${entry.validate[key]?string}"
                       </#list>
                    </#if>
                    class="easyui-datetimebox"
                    name="${entry.field}"
                    <#if readonly?? && readonly> readonly="readonly" </#if>
                    <#if (entry.default)??> value="${entry.default}" </#if>
                    <#if (entry.placeholder)??>
                       placeholder="${entry.placeholder}" prompt="${entry.placeholder}"
                    </#if>
                    <#if (entry.props)??>
                       <#list entry.props?keys as key>
                           ${key}="${entry.props[key]?string}"
                       </#list>
                    </#if>
                />
            </#if>

            <#-- 如果规定了form每行展示多列，则需要额外的div用户换行 -->
            <#if columnNum?? && columnNum gt 0>
                <#if (entry?index + 1) % columnNum == 0 || entry?is_last>
                    </div>
                </#if>
            <#else>
                </div>
            </#if>
        </#list>
    </#if>
</form>

<#if buttons?? && !(hideButton?? && hideButton) >
    <div style="text-align:center;">
        <#list buttons as button>
            <a
                <#if (button.id)??>
                    id="${viewCode}_${button.id}"
                </#if>
                <#-- 如果没有class属性，则默认class为easyui-linkbutton -->
                <#if (button.class)??>
                <#else>
                    class="easyui-linkbutton"
                </#if>
                <#-- 遍历所有属性   -->
                <#list button?keys as key>
                    ${key}="${button[key]}";
                </#list>
            >
                <#if (button.text)??>
                    ${button.text}
                <#else>
                    ButtonText
                </#if>
            </a>
        </#list>
    </div>
</#if>

<script type="text/javascript">
    $(function(){
        try {
            loadLocalFormData_${viewCode}();
            loadRemoteFormData_${viewCode}();
        } catch (e) {
            console.log("load form data failed !");
            console.log(e);
        }

        <#if fields??>
        let cls = "";
            <#list fields as entry>
                <#if (entry.validate)?? && (entry.validate.trigger)?? && entry.validate.trigger == 'blur'>
                    $("#${viewCode}_${entry.field}").textbox('textbox').blur(function() {
                        let val = $("#${viewCode}_${entry.field}").val();
                        validateFormField_${viewCode}("${viewCode}_${entry.field}", {
                            <#if (entry.label)??>
                                label: "${entry.label}",
                            </#if>
                            <#list entry.validate?keys as key>
                                ${key}: "${entry.validate[key]?string}" <#if !key?is_last>,</#if>
                            </#list>
                        }, val);
                    });

                    $("#${viewCode}_${entry.field}").textbox('textbox').focus(function() {
                        builder.removeValidationInfo("${viewCode}_${entry.field}");
                    });
                </#if>

                <#if entry.type?lower_case == 'select' || entry.type?lower_case == 'radio'>
                    cls = $("#${viewCode}_${entry.field}").textbox('getIcon',0).attr("class");
                    if (cls && cls.indexOf("icon-clear") > -1) {
                        $("#${viewCode}_${entry.field}").textbox('getIcon',0).click(function() {
                            $("#${viewCode}_${entry.field}").combobox("clear");
                        });
                    }
                </#if>

            </#list>
        </#if>

        <#if buttons?? && !(hideButton?? && hideButton) >
            <#list buttons as button>
                <#if (button.id)??>
                    $("#${viewCode}_${button.id}").click(function() {
                        <#if (button.sysFunction)??>
                            ${button.sysFunction}_${viewCode}();
                        <#elseif (button.onclick)??>
                            ${button.onclick}();
                        </#if>
                    });
                </#if>
            </#list>
        </#if>

    });

    //加载本地数据
    function loadLocalFormData_${viewCode}() {
        let formValues = {};
        <#if formData??>
            <#list formData?keys as key>
                formValues["${key}"] = "${formData[key]?string}";
            </#list>
        </#if>

        $("#${viewCode!}_form").form("load", formValues);
    }

    //加载远程数据
    function loadRemoteFormData_${viewCode}() {
        <#if loadUrl??>
            var loadUrl = "${loadUrl}";
            <#if loadParams??>
                <#list loadParams?keys as key>
                    <#if !loadUrl?contains("?") && key?index == 0>
                        loadUrl = loadUrl + "?";
                    <#else>
                        loadUrl = loadUrl + "&";
                    </#if>
                    loadUrl = loadUrl + "${key}=${loadParams[key]?string}";
                </#list>
            </#if>
            $("#${viewCode!}_form").form("load", loadUrl);
        </#if>
    }

    // 获取 formData
    function getFormData_${viewCode}(){
        let arr = $("#${viewCode!}_form").serializeArray();
        let ret = {};
        for (let i in arr) {
            let item = arr[i];
            ret[item.name] = item.value;
        }

        return ret;
    }

    // 获取 form的validate信息
    function getFormValidateInfo_${viewCode}() {
        let validateFields = {};
        <#if fields??>
            <#list fields as entry>
                <#if (entry.validate)??>
                    validateFields["${viewCode}_${entry.field}"] = {
                        <#list entry.validate?keys as key>
                            ${key}: "${entry.validate[key]?string}" <#if !key?is_last>,</#if>
                        </#list>
                    };
                    <#if (entry.label)??>
                        validateFields["${viewCode}_${entry.field}"]["label"] = "${entry.label}";
                    </#if>
                </#if>
            </#list>
        </#if>


        return validateFields;
    }

    // 校验form, 通过返回true， 不通过返回false
    function validateForm_${viewCode}() {
        let formData = getFormData_${viewCode}();
        let validateFields = getFormValidateInfo_${viewCode}();
        if (!validateFields) {
            return true;
        }

        for (let p in formData) {
            formData["${viewCode}_" + p] = formData[p];
        }

        for (let fieldId in validateFields) {
            let pass = validateFormField_${viewCode}(fieldId, validateFields[fieldId], formData[fieldId]);
            if (!pass) {
                return false;
            }
        }

        return true;
    }

    // 删除form的验证信息
    function unvalidateForm_${viewCode}() {
        let validateFields = getFormValidateInfo_${viewCode}();
        if (!validateFields) {
            return true;
        }

        for (let fieldId in validateFields) {
            builder.removeValidationInfo(fieldId);
        }

        return true;
    }

    function clearForm_${viewCode}(){
        $("#${viewCode!}_form").form("clear");
    }

    // 校验form的某个属性, 通过返回true， 不通过返回false
    function validateFormField_${viewCode}(id, validateInfo, fieldValue) {
        if (!validateInfo)  {
            return true;
        }

        if (validateInfo.required && (fieldValue == null || fieldValue == undefined || fieldValue == '')) {
            let message = validateInfo.label + " 不能为空!";
            builder.addValidationInfo(id, message);
            return false;
        }

        if (validateInfo.validator) {
            let msg = eval(validateInfo.validator)(id, validateInfo, fieldValue);
            if (msg) {
                builder.addValidationInfo(id, msg);
                return false;
            }
        }

        builder.removeValidationInfo(id);
        return true;
    }

    function submitForm_${viewCode}() {
        let submitUrl;
        <#if submitUrl??>
            submitUrl = "${submitUrl}";
        </#if>

        if (!submitUrl) {
            return;
        }

        if (!validateForm_${viewCode}()) {
            console.log("validate form failed ! viewCode: ${viewCode}");
            return;
        }

        let formData = getFormData_${viewCode}();
        let successCallback;
        let failedCallback;
        <#if submitSuccessCallback??>
            successCallback = eval("${submitSuccessCallback}");
        </#if>
        <#if submitFailedCallback??>
            failedCallback = eval("${submitFailedCallback}");
        </#if>

        builder.postJson(submitUrl, formData, successCallback, failedCallback);
    }

</script>